<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<!-- 浮动属性 float:left、right、none -->
		<!-- 清除属性 clean:left、right、both -->
		<style>
			div{
				width:300px;
				height:300px;
				border-radius:50%
				/* 浮动 */
								float: right;
								font-size: 10em;
							    text-align: center;
								line-height: 300px;
							}
							#d1{
								background-color: #ee1e83;
							}
							#d2{
								background-color: #ff55ff;
							}
							#d3{
								background-color: #ff0000;
								clear: right;
							}
							#d4{
								background-color: #550000;
								clear: both;
							}
						</style>
					</head>
					<body>
						<!-- 页面排版：左右形式---浮动，元素变成块，飘起来，父级左右点 -->
						<div id="d1">1</div>
						<div id="d2">2</div>
						<div id="d3">3</div>
						<div id="d4">4</div>
					</body>
				</html>
			}
		</style>
	</head>
	<body>
	</body>
</html>